<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script>
        function loadCity(){
            let province = document.getElementById("province");
            let city = document.getElementById("city");

            // 定义一个数组
            let arr = new Array();
            // 该数组中的每一个元素都对应一个省份下拉列选项中的所有Option对象
            // 数组中的每一个元素的值也是数组
            arr[0] = [new Option("--城市--",-1)];
            arr[1] = [new Option("--城市--",-1),new Option("南京",1),new Option("苏州",2),new Option("常州",3),new Option("无锡",4),new Option("泰州",5),new Option("徐州",6),new Option("扬州",7)];
            arr[2] = [new Option("--城市--",-1),new Option("杭州",1),new Option("温州",2),new Option("宁波",3),new Option("绍兴",4),new Option("嘉兴",5)];
            arr[3] = [new Option("--城市--",-1),new Option("合肥",1),new Option("滁州",2),new Option("蚌埠",3),new Option("六安",4),new Option("芜湖",5),new Option("安庆",6)];

            // 获取用户所选择的省份的选项的索引号
            let index = province.selectedIndex;

            // 加载之前将原有的选项全部清除
            city.length = 0;

            // 由于用户所选择的省份的选项的索引与数组的下标是一致的
            // 因此,将对应索引的数组元素加载到城市下拉列中
            for(let i = 0; i < arr[index].length; i++){
                city[city.length] = arr[index][i];
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="loadCity()">
    <option value="-1">--省份--</option>
    <option value="1">江苏省</option>
    <option value="2">浙江省</option>
    <option value="3">安徽省</option>
</select>
<!--
    城市下拉列的选项内容是根据省份下拉列所选择的选项内容而生成的
    当省份选择为江苏省时
        城市为:南京、苏州、常州、无锡、泰州、徐州、扬州...
    当省份选择为浙江省时
        城市为:杭州、温州、宁波、绍兴、嘉兴
    当省份选择为安徽省时
        城市为:合肥、滁州、蚌埠、六安、芜湖、安庆
    提示1:数组下标与下拉列的元素下标始终从0开始
    提示2:二维数组
-->
<select id="city">
    <option value="-1">--城市--</option>
</select>
</body>
</html>